<template>
  <div class="container flex justify-between">
    <div>
      <div class="menuIcon">
        <el-icon size="60" color="#e3e3e3" class="pt-4 pl-3" @click="openMenu"><Operation /></el-icon>
      </div>
<!--      手机菜单部分-->
      <div :class="`menu h-40 w-full ${menuShow?`slide-down-div`:`slide-up-div`}`" v-show="menuShow" style="z-index: 9999">
        <div @click="gotoMain" class="text-2xl font-bold text-gray-700 text-center h-16 active:bg-blue-300 flex flex-col justify-center">
          首页(打卡)
        </div>
        <el-divider/>
        <div @click="gotoMyRecord" class="text-2xl font-bold text-gray-700 text-center h-16 active:bg-blue-300 flex flex-col justify-center">
            打卡记录查询
        </div>
        <el-divider/>
        <div class="text-2xl font-bold text-gray-700 text-center h-16 active:bg-blue-300 flex flex-col justify-center">
          设置
        </div>
      </div>
    </div>
    <div class="flex">
<!--      电脑菜单部分-->
      <div class="menuItem sm:hidden" @click="$router.push('/')">
        首页(打卡)
      </div>
      <div class="menuItem sm:hidden" @click="$router.push('/personalRecord')">
        打卡记录查询
      </div>
      <div class="menuItem">
        设置
      </div>

      <img :src="avaterImgSrc" class="h-12 rounded-2xl mt-4 pr-3"/>
    </div>
  </div>
</template>

<script>
import {Operation} from "@element-plus/icons-vue";
import router from "../../router/index.js";
import {ElMessage} from "element-plus";

export default {
  name: 'HeadComponent',
  components: {Operation},
  data() {
    return {
      avaterImgSrc: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ffc2d272d-3899-4af7-a6b0-bcb640b9cdd2%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1693144588&t=32069143a117940ed2bb7d78ced12922',
      menuShow: false,
    }
  },
  methods: {
    openMenu() {
      this.menuShow = !this.menuShow;
    },
    gotoMyRecord() {
      router.push('/personalRecord');
      this.menuShow = false;
    },
    gotoMain() {
      router.push('/');
      this.menuShow = false;
    }
  },
  mounted() {

  }
}
</script>

<style scoped>
.menuItem{
  @apply text-gray-100 font-bold 2xl:text-2xl xl:text-xl md:text-xl sm:text-xl mr-8 pt-5 pl-2 pr-2 rounded-2xl active:bg-blue-300 hover:text-cyan-200;
  cursor: pointer;
  min-width: 100px;
  text-align: center;
}
.menu{
  width: 100%;
  height: 100%;
  position: absolute;
  backdrop-filter: blur(100px);
}
@media (max-width: 640px) {
  .menuItem{
    display: none;
  }
  .menuIcon{
    display: block;
  }
}
@media (min-width: 640px) {
  .menuItem{
    display: block;
  }
  .menuIcon{
    display: none;
  }
}
/* 定义动画 */
@keyframes slideInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* 定义动画 */
@keyframes slideInFromBt {
  0% {
    opacity: 0;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-100%);
  }
}

.slide-down-div {
  animation: slideInFromTop 0.69s ease-out; /* 应用动画 */
}
.slide-up-div {
  animation: slideInFromBt 0.69s ease-out; /* 应用动画 */
}
.el-divider--horizontal{
  margin: 0 !important;
}
</style>